<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin Demo - edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>

    <!-- 引入结束 -->
    <style>
        body {
            margin: 10px;
        }

        table {
            border-spacing: 0px;
        }
    </style>
</head>

<body>
    <h2>yqUnitEdit</h2>
    <div id="lly" style="width:100%;height:350px;">
    </div>
    <p></p>
    <div>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:getValue()">getValue</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:dataClear()">clear</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:setValue()">setValue</a>
        <input id="txt_width" value="800"></input>
        <input id="txt_height" value="400"></input>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset()">reset</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:destroy()">destroy</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit(true)">enable</a>
        <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:isedit(false)">disable</a>
    </div>
    <div id="lly_2" style="width:100%;height:250px;"></div>
    <br />
    <div id="lly_3" style="width:100%;height:350px;"></div>
    <script>
        $(function () {
            $("#lly").yqUnitEdit({
                ajaxUrl: "",
                ui_mask: unitSettings,  //数据列配置对象
                data: [
                    {
                        "name": "1",
                        "checkbox": false,
                        "numberBox": 0,
                        "subs": [
                            {
                                "name": "1-1",
                                "checkbox": false,
                                "numberBox": 0
                            },
                            {
                                "name": "1-2",
                                "checkbox": false,
                                "numberBox": 0
                            }
                        ]
                    },
                    {
                        "name": "2",
                        "checkbox": false,
                        "numberBox": 0
                    },
                    {
                        "name": "3",
                        "checkbox": false,
                        "numberBox": 0
                    }
                ],
                isEdit: true,
                beforBindingTitle: function (ui_mask, callback) {
                    callback(ui_mask);
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                },   //标题绑定后
                beforeAdd: function (rows, row, callback) {
                    callback(row);
                },
                afterChange: function (rows) {

                },
            });

            $("#lly_2").yqUnitEdit({
                ajaxUrl: "",
                ui_mask: unitSettings_2,  //数据列配置对象
                data: {},
                isEdit: true,
                beforBindingTitle: function (ui_mask, callback) {
                    callback(ui_mask);
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                },   //标题绑定后
                beforeAdd: function (rows, row, callback) {
                    callback(row);
                },
                afterChange: function (rows) {

                },
            });


            $("#lly_3").yqUnitEdit({
                ajaxUrl: "",
                ui_mask: unitSettings_3,  //数据列配置对象
                data: {},
                isEdit: true,
                beforBindingTitle: function (ui_mask, callback) {
                    callback(ui_mask);
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                },   //标题绑定后
                beforeAdd: function (rows, row, callback) {
                    callback(row);
                },
                afterChange: function (rows) {

                },
            });

            //----------------------------------
            $("#txt_width").numberspinner({
                width: 90,
                min: 100,
                max: 1000,
                label: "w",
                labelWidth: 18,
            })

            $("#txt_height").numberspinner({
                width: 130,
                min: 100,
                max: 1000,
                label: "h",
                labelWidth: 15,
                buttonText: "resize",
                onClickButton: function () {
                    $("#lly").yqUnitEdit("resize",
                        {
                            width: $("#txt_width").numberspinner("getValue"),
                            height: $("#txt_height").numberspinner("getValue")
                        });
                },
            })
            //----------------------------------
        });

        function getValue() {
            old_value = $("#lly").yqUnitEdit("getData");
            console.log(old_value);
            console.log($.jsonFormat(old_value));
        }

        function dataClear() {
            $("#lly").yqUnitEdit("clear");
        };

        function setValue() {
            $("#lly").yqUnitEdit("setData", old_value);
        }

        function reset() {
            $("#lly").yqUnitEdit({
                ui_mask: unitSettings
            });
        }

        function destroy() {
            $("#lly").yqUnitEdit("destroy");
        }

        function isedit(tf) {
            $("#lly").yqUnitEdit("isEdit", tf);
        }

        var unitSettings = {
            ui_type: 16,  //17-attr,15-table,16-trees
            editType: 2,
            displayMember: "name",
            param: {
                titles: [{
                    is_func: false,
                    name: "code",
                    ui_title: "Code",
                    ui_type: 2,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "name",
                    ui_title: "Name",
                    ui_type: 2,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "checkbox",
                    ui_title: "Checkbox",
                    ui_type: 3,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "dateTimePicker",
                    ui_title: "DateTimePicker",
                    ui_type: 4,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "richTextBox",
                    ui_title: "RichTextBox",
                    ui_type: 5,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "comboBox",
                    ui_title: "ComboBox",
                    ui_type: 6,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "treeSelect",
                    ui_title: "TreeSelect",
                    ui_type: 8,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "numberBox",
                    ui_title: "NumberBox",
                    ui_type: 9,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "NumberSpinner",
                    ui_title: "NumberSpinner",
                    ui_type: 10,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "TimeSpinner",
                    ui_title: "TimeSpinner",
                    ui_type: 11,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "DateTimeBox",
                    ui_title: "DateTimeBox",
                    ui_type: 12,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }],
                model: []
            }
        }

        var unitSettings_2 = {
            "ui_mask": {},
            "titles": {
                "titles": [],
                "model": []
            },
            "ajaxUrl": "",
            "editType": 1,
            "editWidth": "500",
            "editHeight": "400",
            "ui_type": 17,
            "param": {
                "titles": [
                    {
                        "is_func": false,
                        "name": "websvr",
                        "ui_title": "站点设置",
                        "ui_type": 17,
                        "ui_width": 80,
                        "ui_visible": true,
                        "ui_readonly": false,
                        "ui_mask": {
                            "blank": "",
                            "ajaxUrl": "",
                            "editType": 1,
                            "editWidth": "500",
                            "editHeight": "400",
                            "param": {
                                "titles": [
                                    {
                                        "is_func": false,
                                        "name": "webtype",
                                        "ui_title": "站点类型",
                                        "ui_type": 6,
                                        "ui_width": 80,
                                        "ui_visible": true,
                                        "ui_readonly": false,
                                        "ui_mask": {
                                            "lists": [
                                                {
                                                    "no": "1",
                                                    "name": "网站"
                                                },
                                                {
                                                    "no": "2",
                                                    "name": "管理系统"
                                                }
                                            ],
                                            "default": 0
                                        }
                                    },
                                    {
                                        "is_func": false,
                                        "name": "addr",
                                        "ui_title": "端口号",
                                        "ui_type": 10,
                                        "ui_width": 80,
                                        "ui_visible": true,
                                        "ui_readonly": false,
                                        "ui_mask": {
                                            "lists": [
                                                {
                                                    "no": "cms",
                                                    "name": "网站"
                                                },
                                                {
                                                    "no": "eip",
                                                    "name": "管理系统"
                                                }
                                            ],
                                            "default": -1,
                                            "groupSeparator": ""
                                        }
                                    },
                                ],
                                "model": []
                            }
                        }
                    },
                    {
                        "is_func": false,
                        "name": "session:remark",
                        "ui_title": "session:remark",
                        "ui_type": 2,
                        "ui_width": 80,
                        "ui_visible": true,
                        "ui_readonly": false,
                        "ui_mask": {}
                    }, {
                        is_func: false,
                        name: "richTextBox",
                        ui_title: "RichTextBox",
                        ui_type: 5,
                        ui_width: 80,
                        ui_visible: true,
                        ui_readonly: false,
                        ui_mask: {}
                    }
                ],
                "model": []
            }
        };

        var unitSettings_3 = {
            ui_type: 15,  //17-attr,15-table,16-trees
            editType: 2,
            param: {
                titles: [{
                    is_func: false,
                    name: "code",
                    ui_title: "Code",
                    ui_type: 2,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "name",
                    ui_title: "Name",
                    ui_type: 2,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "checkbox",
                    ui_title: "Checkbox",
                    ui_type: 3,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "dateTimePicker",
                    ui_title: "DateTimePicker",
                    ui_type: 4,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "richTextBox",
                    ui_title: "RichTextBox",
                    ui_type: 5,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "comboBox",
                    ui_title: "ComboBox",
                    ui_type: 6,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "treeSelect",
                    ui_title: "TreeSelect",
                    ui_type: 8,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "numberBox",
                    ui_title: "NumberBox",
                    ui_type: 9,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "NumberSpinner",
                    ui_title: "NumberSpinner",
                    ui_type: 10,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "TimeSpinner",
                    ui_title: "TimeSpinner",
                    ui_type: 11,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }, {
                    is_func: false,
                    name: "DateTimeBox",
                    ui_title: "DateTimeBox",
                    ui_type: 12,
                    ui_width: 80,
                    ui_visible: true,
                    ui_readonly: false,
                    ui_mask: {}
                }],
                model: []
            }
        }

    </script>
</body>

</html>